<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: #bfa;

        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        /* 那七个值的和是包含块的宽度 */
        /* 7个值变成了9个值  增加了left 和right  */
        /* 那九个值的和等于包含块内容的宽度 */
        /* 到了绝对定位后 水平方向的布局等式就需要添加left 和right  */
        /* 规则和之前一样 只是多添加了两个值 */
        /* 当发生过度约束时，如果9个值中没有auto 则自动调整right  */
        /* 如果有auto 则自动调整auto的值使等式满足 */
        /* 可以设置auto 有margin width right left  */
        /* 使等式满足 */
        /* 可以达到水平居中的效果  */
        /* 如果不设置left right  会自动修正这两个值 */
        /* 垂直方向的等式也必须满足   top  bottom  margin padding border height 等于包含块的高中  */
        /* 绝对定位以后 就必须满足 正常的文档流中是不要求满足的 */
        /* 可以让元素垂直居中 */
        /* left right top bottom 都为0 margin 是auto   */
        /* 达到水平 垂直 双方向居中 */
        /* 通过绝对定位 使元素达到垂直居中的方式之一 */
        /* 水平方向9个属性 都没auto 调整right  有auto 调整auto  */
        /* 垂直方向也是九个属性 九个值加一起等于包含块的高度 */
        /* top   margin border padding （top bottom） height bottom */
    </style>
</head>

<body>
    <div class="box1">
        <div class="box1"></div>
    </div>
</body>

</html>